<template>
  <div class="db2">
    <!--
    action表示上传地址
    show-file-list 是否显示已上传文件列表 进度条
    on-success 文件上传成功时的钩子
    before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    -->
    <span class="sp1">
      <!--图片地址和样式-->
      <div class="b1">
           <el-image
               :src="imageUrl"
               style="width: 258px; height: 258px"
           ></el-image>
      </div>
      <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <!--上传图按钮-->
          <el-button type="info" round class="bu1" size="medium ">更换头像</el-button>
         <div class="tips">支持JPG,PNG格式,且文件需小于1M</div>
      </el-upload>
    </span>

    <!--基础信息from表单-->
    <span class="sp2">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" size="mini">
           <!--昵称-->
           <el-form-item label="昵称:" prop="name">
              <el-input v-model="ruleForm.name" style="width: 240px;height: 30px;font-size: 12px;"></el-input>
           </el-form-item>
           <!--性别-->
           <el-form-item label="性别:" prop="sex" style="font-size: 12px">
            <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男" style="font-size: 12px"></el-radio>
            <el-radio label="女" style="font-size: 12px;"></el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 生日-->
          <el-form-item label="生日:" prop="birthday" style="font-size: 12px;">
             <el-date-picker
                 style="width: 240px"
                 type="dates"
                 v-model="ruleForm.birthday"
                 placeholder="选择您的生日">
          </el-date-picker>
          </el-form-item>
          <!--生活状态-->
          <el-form-item label="生活状态:" prop="animation" style="font-size: 12px">
            <el-radio-group v-model="ruleForm.animation">
            <el-radio label="单身" style="font-size: 12px"></el-radio>
            <el-radio label="热恋中" style="font-size: 12px;"></el-radio>
            <el-radio label="已婚" style="font-size: 12px"></el-radio>
            <el-radio label="为人父母" style="font-size: 12px;"></el-radio>
            </el-radio-group>
          </el-form-item>
          <!--从事行业-->
          <el-form-item label="从事行业:" prop="industry" style="font-size: 12px">
            <el-cascader :options="ruleForm.industry" clearable v-model="ruleForm.industry1"></el-cascader>
          </el-form-item>
          <!--兴趣-->
        <el-form-item label="兴趣:">
          <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食" name="type"></el-checkbox>
          <el-checkbox label="动漫" name="type"></el-checkbox>
          <el-checkbox label="摄影" name="type"></el-checkbox>
          <el-checkbox label="电影" name="type"></el-checkbox>
          <el-checkbox label="体育" name="type"></el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="财经" name="type"></el-checkbox>
          <el-checkbox label="音乐" name="type"></el-checkbox>
          <el-checkbox label="游戏" name="type"></el-checkbox>
          <el-checkbox label="科技" name="type"></el-checkbox>
          <el-checkbox label="旅游" name="type"></el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="文学" name="type"></el-checkbox>
          <el-checkbox label="公益" name="type"></el-checkbox>
          <el-checkbox label="汽车" name="type"></el-checkbox>
          <el-checkbox label="时尚" name="type"></el-checkbox>
          <el-checkbox label="宠物" name="type"></el-checkbox>
          </el-checkbox-group>
       </el-form-item>
          <!--个性签名-->
          <el-form-item label="个性签名:" prop="desc" style="font-size: 12px;">
            <el-input type="textarea" v-model="ruleForm.desc" style="width: 240px;height: 30px;font-size: 12px;"  placeholder="20个字以内"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </span>
  </div>
</template>

<script>
export default {
name: "BasicInfoTemplate",
  methods: {
    //文件上传成功时的钩子
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
    },
    //传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //form表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }

  },
  data(){
  return{
    imageUrl: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    ruleForm: {
      name: '',
      sex: '',
      birthday: '',
      animation: '',
      delivery: false,
      type: [],
      industry:[
        {
          value: 'zhinan',
          label: '指南',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
        },
      ],
      industry1:[],
      resource: '',
      desc: ''
    },
    rules: {
      name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ],
      region: [
        { required: true, message: '请选择活动区域', trigger: 'change' }
      ],
      date1: [
        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      ],
      date2: [
        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
      ],
      type: [
        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
      ],
      resource: [
        { required: true, message: '请选择活动资源', trigger: 'change' }
      ],
      desc: [
        { required: true, message: '请填写活动形式', trigger: 'blur' }
      ]
    }
  }
  }
}
</script>

<style scoped>
.db2{
  height: 800px;
  border:1px solid #E9E9EB;
}
.sp1{
  position:relative;
  left: 35px;
  top: 35px;
}
.b1{
  width: 258px;
  height: 258px;
  border:1px solid #2B2B2B;
}
.bu1{
  position:relative;
  left: -10px;
  top: 15px;
}
.tips{
  margin-top: 20px;
  margin-left: -13px;
  color: #999;
  font-size: 18px;
  line-height: 30px;
}
.sp2{
  position:relative;
  left: 380px;
  top: -315px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
/*.avatar-uploader-icon {*/
/*  font-size: 28px;*/
/*  color: #8c939d;*/
/*  width: 178px;*/
/*  height: 178px;*/
/*  line-height: 178px;*/
/*  text-align: center;*/
/*}*/
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
